<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <table
      class="pure-table pure-table-horizontal"
      :style="tableStyle"
    >
      <tbody>
        <tr>
          <td colspan="5" style="text-align: right; font-size: 18px">玲珑轮胎工业园环保数据公示</td>
          <td
            colspan="2"
            style="text-align: left; font-size: 12px;vertical-align: bottom;"
          >2020/5/15 17:36:26</td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: right">非甲烷总烃</td>
          <td colspan="1">总烃</td>
          <td colspan="1" />
          <td colspan="1">二氧化硫</td>
          <td colspan="1">氢氧化物</td>
          <td colspan="1">颗粒物</td>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name1 }}</td>
          <td>{{ item.ting }}</td>
          <td>{{ item.zongTing }}</td>
          <td>{{ item.name2 }}</td>
          <td>{{ item.param1 }}</td>
          <td>{{ item.param2 }}</td>
          <td>{{ item.param3 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'

export default {
  name: 'GongyeDataTable',
  mixins: [defaultmixins],
  data() {
    return {
      list: [
        {
          name1: '厂界1',
          ting: '0.51',
          zongTing: '1.96',
          name2: '锅炉1',
          param1: '2.03',
          param2: '43.93',
          param3: '1.66'
        },
        {
          name1: '厂界2',
          ting: '0.5',
          zongTing: '1.96',
          name2: '锅炉2',
          param1: '19.44',
          param2: '41.23',
          param3: '4.86'
        },
        {
          name1: '厂界3',
          ting: '1.94',
          zongTing: '1.94',
          name2: '锅炉3',
          param1: '0',
          param2: '0',
          param3: '0'
        }
      ]
    }
  },
  computed: {
    tableStyle() {
      return {
        width: '100%',
        height: '100%'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

  table {
    width: 100%;
    height: inherit;
    border-collapse: collapse;
    border-spacing: 0;
  }

  td, th {
    font-family: cursive;
    padding: 0;
    color: #6be183;
    /*height: 44px;*/
  }

  .pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border-left: 0.5px solid #7c3a47;
    border-top: 2px solid #ea4e53;
    border-bottom: 2px solid #ea4e53;;
  }

  .pure-table caption {
    color: #6be183;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    /*text-align: center;*/
  }

  .pure-table td, .pure-table th {
    border-left: 0.5px solid #7c3a47;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;

    &:last-child {
      border-right:  1px solid #7c3a47;
    }
  }
  .pure-table tr:nth-child(2) {
    td {
      &:nth-child(2) {
        border-right: 1px solid #7c3a47;
      }
    }
  }

  .pure-table tr:not(:nth-child(2)) {
    td {
      &:nth-child(3) {
        border-right: 1px solid #7c3a47;
      }
    }
  }

  .pure-table tr:nth-child(3),
  .pure-table tr:nth-child(4),
  .pure-table tr:nth-child(5) {
    td {
      text-align: center;
    }
  }

  .pure-table td {
    background-color: transparent;
  }

  .pure-table-horizontal td, .pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 2px solid #ea4e53;
  }

  .pure-table-horizontal tbody > tr:last-child > td {
    border-bottom-width: 0;
  }
</style>
